<template>
  <!-- 顶部导航栏 -->
  <div class="topbar">
    <div class="logo" @click="change(1)">
      <!-- <img src="../assets/logo.png" class="logo"> -->
    </div>
    <div class="menu">
      <span
        @click="switchMenu(true)"
        class="top-menu-button"
        v-show="!isBoxShow"
      ></span>
      <div class="box" v-show="isBoxShow">
        <span @click="switchMenu(false)" class="el-icon-close"></span>
        <ul class="titlebar">
          <!-- <li class="liactive" :class="toli === 1 && 'active'" @click="change(1)">Home</li> -->
          <!-- <li class="liactive" :class="toli === 2 && 'active'"> -->
          <li class="liactive" :class="action === 'product' && 'active'">
            <div class="t m" @click="expandMenu('product')">
              Products
              <i class="el-icon-arrow-up"></i>
            </div>
            <el-dropdown class="pc" trigger="click" @command="handleCommand">
              <div class="t pc" @click="expandMenu('product')">
                Products
                <i class="el-icon-arrow-up"></i>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="marketplace"
                  >Frontrock Marketplace</el-dropdown-item
                >
                <el-dropdown-item command="dex">Frontrock Dex</el-dropdown-item>
                <el-dropdown-item command="banking"
                  >Frontrock Banking</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
            <div class="sub">
              <p @click="change(2)">Frontrock Marketplace</p>
              <p @click="change(3)">Frontrock Dex</p>
              <p @click="change(4)">Frontrock Banking</p>
            </div>
          </li>
          <li
            class="liactive"
            @click="change(5)"
            :class="action === 'about' && 'active'"
          >
            <div class="t m" @click="expandMenu('about')">
              About
              <!-- <i class="el-icon-arrow-up"></i> -->
            </div>
            <!-- <el-dropdown class="pc" trigger="click"> -->
            <div class="t pc" @click="expandMenu('about')">
              About
              <!-- <i class="el-icon-arrow-up"></i> -->
            </div>
            <!-- <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>About 1</el-dropdown-item>
              <el-dropdown-item>About 2</el-dropdown-item>
            </el-dropdown-menu> -->
            <!-- </el-dropdown> -->
            <div class="sub">
              <p>About us</p>
              <p>About you</p>
            </div>
          </li>
          <li
            class="liactive"
            @click="change(6)"
            :class="action === 'blog' && 'active'"
          >
            <div class="t m" @click="expandMenu('blog')">
              Blog
              <!-- <i class="el-icon-arrow-up"></i> -->
            </div>
            <div class="t pc" @click="expandMenu('blog')">
              Blog
              <!-- <i class="el-icon-arrow-up"></i> -->
            </div>
          </li>
          <li
            class="liactive"
            @click="change(7)"
            :class="action === 'contact' && 'active'"
          >
            <div class="t m" @click="expandMenu('contact')">
              Contact
              <!-- <i class="el-icon-arrow-up"></i> -->
            </div>
            <div class="t pc" @click="expandMenu('contact')">
              Contact
              <!-- <i class="el-icon-arrow-up"></i> -->
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    // this.activeli()
  },
  props: {
    toli: Number,
  },
  data() {
    return {
      isBoxShow: false,
      action: "",
    };
  },
  methods: {
    switchMenu(isShow) {
      this.isBoxShow = isShow;
      this.action = (!isShow && " ") || this.action;
    },
    expandMenu(module) {
      // console.log(module)
      this.action = module;
    },
    handleCommand(cmd) {
      // console.log(cmd)
      const obj = {
        marketplace: 2,
        dex: 3,
        banking: 4,
      };
      this.change(obj[cmd])
    },
    change(i) {
      Bus.$emit('topbar', i)
      this.isBoxShow = false
      this.action = ''
    },
  },
};
</script>

<style scoped lang="scss">
.topbar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  margin-bottom: 100px;
  @media screen and (max-width: 640px) {
    // height: 160px;
    margin-bottom: 0;
  }
}

.logo {
  cursor: pointer;
  margin: 7px 0 0 29px;
  width: 162px;
  background: url(../assets/logo.png) no-repeat;
  background-size: 100% auto;
  @media screen and (max-width: 640px) {
    width: 122px;
    padding: 0 0px;
    margin: 0px 0 0 12px;
  }
}

.menu {
  height: 100%;
  padding-top: 15px;
  margin-left: 30px;
  color: #fff;
  // .el-icon-s-unfold{
  @media screen and (max-width: 640px) {
    .top-menu-button {
      cursor: pointer;
      background: url(../assets/top_menu_button.png) no-repeat;
      background-size: auto 100%;
      filter: invert(1);
      width: 25px;
      height: 25px;
      top: 10px;
      right: 15px;
      position: absolute;
    }
  }
  .box {
    // background: #08124d;
    display: flex;
    justify-content: center;
    position: absolute;
    inset: 0;
    z-index: 999;
    @media screen and (max-width: 640px) {
      background: #08124d;
    }
    @media screen and (min-width: 641px) {
      display: block !important;
      // background: #08124d;
      position: relative;
    }
    .el-icon-close {
      display: none;
      cursor: pointer;
      position: absolute;
      top: 14px;
      right: 16px;
      transform: scale(1.5);
      @media screen and (max-width: 640px) {
        display: block;
      }
    }
    ul.titlebar {
      // display: flex;
      list-style: none;
      position: relative;
      margin: 0;
      padding: 0;
      color: white;
      font-size: 16px;
      font-family: "Krona One", monospace;
      white-space: nowrap;
      // font-family: "Krona One";
      &::after {
        clear: both;
        content: "";
        display: block;
        width: 0;
        height: 0;
        visibility: hidden;
      }
      li {
        margin-top: 10px;
        // float: left;
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-bottom: 4px solid transparent;
        // transition: all .2s linear;
        transition: all 0.2s ease;
        display: inline-block;
        .t {
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
        .sub {
          display: none;
        }
        &:hover {
        }
      }
      @media screen and (max-width: 640px) {
        margin: 150px 0 0 0;
        width: 100%;
        li {
          margin: 0 0 15px 0;
          width: auto;
          height: auto;
          line-height: 35px;
          display: block;
          .t {
            .el-icon-arrow-up {
              transition: transform 0.2s ease;
            }
          }
          .sub {
            opacity: 0;
            height: 0;
            font-size: 12px;
            line-height: 25px;
            display: block;
            p {
              cursor: pointer;
              height: 0;
              margin: 0;
            }
          }
          &.active {
            background: #212e7d;
            .t {
              .el-icon-arrow-up {
                transform: rotate(180deg);
              }
            }
            .sub {
              opacity: 1;
              height: auto;
              p {
                height: auto;
                margin: 10px 0;
              }
            }
          }
        }
      }
    }
    // @media screen and (max-width: 480px) {
    //     li {font-size: 15px;width:80px;}}}
  }
  @media screen and (max-width: 1080px) {
    margin-left: 10px;
    .titlebar > li {
      width: 100px;
    }
  }
  // @media screen and (max-width: 640px) {
  //   // position: absolute;
  //   // top: 60px;
  //   // left: 0; right: 0;
  //   // height: 100px;
  //   // margin: 0;
  //   // width: 100%;
  //   // ul.titlebar {
  //   //   li{
  //     // width: 33%;
  //       // height: 35px;
  //       // border-bottom-width: 2px;
  //       // transition-duration: 0.2s;
  //       // &:nth-child(-n+3) {
  //         //   margin-top: 5px;
  //       // }
  //     // }
  //   // }
  // }
}

.el-dropdown {
  color: white;
}
.el-dropdown-menu__item {
  font-family: "Krona One", Arial;
  color: #070f4e;
}

.article {
  .logo {
    background-image: url(../assets/logo_deep.png);
  }
  .menu {
    .box {
      ul.titlebar {
        color: #070f4e;
      }
      .el-dropdown {
        color: #070f4e;
      }
    }
  }
}
/* 	.li_active {
		background: #d0a62a;
		color: white;
	} */

// .active {
//   color: #EF6566;
// }
</style>
